<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="js/vue.js"></script>
	</head>
	<body>
		<div id="root">
			<h1>插值语法</h1>
			hello,{{name}}
			<h1>指令语法</h1>
			<a v-bind:href="url">吴苏苏</a>
			<h2>简写</h2>
			<a :href="url">吴苏苏</a>
			<h1>数据绑定</h1>
			单向数据绑定：<input type="text" v-bind:value="name" name="" id="">
			双向向数据绑定：<input type="text" v-model:value="name" name="" id="">
			<h2>简写</h2>
			双向向数据绑定：<input type="text" v-model="name" name="" id="">
			<!-- v-model只能用在表单类元素（输入类元素） -->
		</div>
		<script type="text/javascript">
			Vue.config.productionTip = false;
			// 创建vue实例
			const vm = new Vue({
				// 第一种写法
				el: '#root', //el用于指定当前vue实例为哪个容器服务，值通常为css选择器字符串
				// 第一种写法：对象式
				data: {  //data中用于存储数据，数据供el所指定的容器使用
					name: 'vue',
					url: 'https://snx.icu/'
				}
			})
			// 第二种写法
			vm.$mount('#root');
			
			// 第二种写法：函数式
			// data:function(){
			//或 data(){
			// 	return{
			// 		name: '吴苏苏';
			// 	}
			// }
		</script>
	</body>
</html>